<template>
	<div class='list-div'>
		<!--头部搜索-->
		<header class='search-div padding10 white_bg'>
			<div class='input-div'>
				<input type="text" placeholder="请输入搜索关键字" v-model="keyword"
					confirm-type='搜索' @confirm='searchListBykeyword'>
				<span class='iconfont icon-sousuo' @click.stop='searchListBykeyword'></span>
			</div>
			<div class='add-div' @click='addAddressPage'>
				<span class='iconfont icon-jia'></span>
				<span class='txt-add'>添加</span>
			</div>
		</header>
		
		<!--没有收件人信息-->
		<div class='noreceive' v-show='receiveList.length==0'>
			<span class='iconfont icon-baoguo'></span>
			<p>您还没有添加收件人信息</p>
		</div>
		
		<!--收件人信息-->
		<div class="receive-div margin_top30" v-show='receiveList.length!=0'>
			<ul @click='showActionSheet'>
				<li class='white_bg padding10' v-for='(item,i,k) in receiveList' :key='k'>
					<p class='top'>
						<span>{{item.name}}</span>
						<span>{{item.phone}}</span>
					</p>
					<p class='address'>{{item.address}}</p>
					<p class='detail-div'>
						<span class='detail'>{{item.detail}}</span>
						<span class='iconfont icon-gengduo' :data-ind='i'></span>
					</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import {showToast,post,setClipboardData} from '../../../utils/index.js';
import {myReceiveListUrl,deleteAddrUrl} from '../../../config.js';
import {mapGetters} from 'vuex';
export default {
	data(){
		return{
			keyword: '',   //关键词搜索
			receiveList: [],
			currentPage: 1,
			nomore: false,  //没有更多
			chosenIndex: 0,  //选择操作的序列号
			isMine: false,  //是否是我的地址
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onShow(){
		var queryJson = this.$mp.query;
		this.isMine = queryJson.mine==1? true: false;  //布尔值
		if(this.isMine){
			uni.setNavigationBarTitle({
				title: '我的地址'
			});
		}else{
			uni.setNavigationBarTitle({
				title: '我的收件人'
			});
		}
		this.getReceiveList();
	},
	methods: {
		//初始化数据
		initData(){
			this.keyword = '';
			this.receiveList = [];
			this.currentPage = 1;
			this.nomore = false;
		},
		//跳转到新增地址页面
		addAddressPage(){
			let url = '/pages/address/add/index';
			if(this.isMine){
				url += '?mine=1';
			};
			uni.navigateTo({
				url: url
			});
		},
		//获取收件人列表
		getReceiveList(){
			var self = this;
			if(this.nomore){  //不能加载更多
				showToast('没有更多');
			    return;
			};
			var tmpObj = {
				session_token: self.userInfo.session_token,
				page: self.currentPage
			};
			if(this.keyword){
				tmpObj.keyword = self.keyword;
			};
			if(this.isMine){  //是否是我的地址
				tmpObj.mine = self.isMine;
			}
			post(myReceiveListUrl, tmpObj)
			.then((res)=>{
				if(res.code==200){
					var data = res.data;
					var pages = data.page_count;
					var listData = data.list;
					if(listData.length==0){
					    showToast('没有更多数据');
					}else{
					    self.receiveList = [...self.receiveList, ...listData];
					    self.currentPage++;
					    if(self.currentPage > pages){
					        self.nomore = true;
					    }
					    self.$forceUpdate();
					}
				}else{
					var errMsg = res.errMsg;
					showToast(errMsg);
				}
			});
		},
		//根据关键词搜索
		searchListBykeyword(){
			if(this.keyword.trim()){
				let keyword = this.keyword.trim();
				this.initData();
				this.keyword = keyword;
				this.getReceiveList();
			}else{
				showToast('请先输入关键词');
			}
		},
		//点击更多按钮
		showActionSheet(e){
			let index = e.target.dataset.ind;
			if(index!=0 && !index){  //点击别处
				return;
			};
			this.chosenIndex = index;
			var self = this;
			uni.showActionSheet({
				itemList: ['编辑','复制','删除'],
				itemColor: '#333333',
				success(res){
					let _index = res.tapIndex;
					let addrObj = self.receiveList[self.chosenIndex];
					if(_index===0){  //编辑
						let url = '/pages/address/add/index?aid='+addrObj.aid
								+"&name="+addrObj.name
								+"&phone="+addrObj.phone
								+"&address="+addrObj.address
								+"&detail="+addrObj.detail;
						if(self.isMine){
							url += '&mine=1';
						}
						uni.navigateTo({
							url: url
						});
					}else if(_index===1){  //复制
						let txt = addrObj.name+'\n'
								  + addrObj.phone+'\n'
								  + addrObj.address+'\n'
								  + addrObj.detail;
						setClipboardData(txt);
					}else if(_index===2){  //删除
						self.deleteAddr(addrObj.aid);
					}
				}
			});
		},
		/** 删除地址
		 * 参数：表示地址的id
		 */
		deleteAddr(aid){
			var self = this;
			var tmpObj = {
				aid,
				session_token: self.userInfo.session_token
			};
			if(self.isMine){
				tmpObj.mine = self.isMine;
			}
			post(deleteAddrUrl, tmpObj)
			.then((res)=>{
				if(res.code==200){
					showToast('删除成功');
					self.receiveList.splice(self.chosenIndex,1);
					self.$forceUpdate();
				}else{
					showToast(res.errMsg);
				}
			});
		}
	},
	onPullDownRefresh(){
		uni.stopPullDownRefresh();
		uni.hideNavigationBarLoading();
		this.initData();
		this.getReceiveList();
	},
	onReachBottom(){
		this.getReceiveList();
	}
}
</script>

<style lang="less" scoped>
.list-div{
	padding-bottom: 30upx;
}
/**头部搜索**/
.search-div{
	height: 100upx;
	display: flex;
	align-items: center;
	.input-div{
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
		input{
			flex:1;
			height: 70upx;
			background: #d5d5d5;
			border-radius: 16upx;
			padding:0 50upx 0 20upx;
			box-sizing: border-box;
		}
		span.icon-sousuo{
			position: absolute;
			right: 10upx;
			font-size: 46upx;
		}
	}
	/*添加*/
	.add-div{
		height: 100%;
		display: flex;
		align-items: center;
		span.icon-jia{
			font-size: 46upx;
		}
		.txt-add{
			color: red;
		}
	}
}
/*没有收件人信息*/
.noreceive{
	margin-top: 30%;
	text-align: center;
	color: #999;
	span{
		font-size: 200upx;
	}
}
/**有收件人**/
.receive-div{
	ul{
		li{
			margin-top: 10upx;
			p.top{
				height: 60upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e5e5e5;
			}
			p.address{
				min-height: 50upx;
				display: flex;
				align-items: center;
				color: #555;
			}
			/**详细地址**/
			.detail-div{
				min-height: 50upx;
				display: flex;
				align-items: center;
				color: #555;
				justify-content: space-between;
				span.icon-gengduo{
					font-size: 50upx;
				}
			}
		}
	}
}
</style>
